<template>
  <div class="encyclopedias">
    <div class="encyclopedias-wrap">
      <div class="encyclopedias-content-title">
        <nuxt-link to="/wiki">
          <div
            class="encyclopedias-content-title-text"
          >
            百科
          </div>
        </nuxt-link>

        <div class="encyclopedias-content-title-icon" />
        <div class="encyclopedias-content-title-detils-text">
          百科详情
        </div>
      </div>
      <div class="encyclopedias-content">
        <div class="encyclopedias-content-introduce">
          <div class="encyclopedias-content-introduce-name">
            {{ detailsData.wiki_name }}
          </div>
          <div class="encyclopedias-content-introduce-text">
            {{ detailsData.describe }}
          </div>
        </div>
        <div class="encyclopedias-content-tab">
          <div
            :class="{active:active===0}"
            @click="active=0"
          >
            项目档案
          </div>
          <div
            :class="{active:active===1}"
            @click="active=1"
          >
            术后护理
          </div>
          <div
            v-if="tabs"
            :class="{active:active===2}"
            @click="active=2"
          >
            相关药品/材料/仪器
          </div>
        </div>
        <div
          v-if="active===0"
          class="encyclopedias-content-archives"
        >
          <div class="encyclopedias-content-characteristic-title">
            <div class="encyclopedias-content-characteristic-title-icon" />
            <div class="encyclopedias-content-characteristic-title-text">
              项目特色
            </div>
          </div>
          <div class="encyclopedias-content-characteristic-content">
            {{ detailsData.feature }}
          </div>
          <div
            v-if="detailsData.alias.length"
            class="encyclopedias-content-alias-title"
          >
            <div class="encyclopedias-content-alias-title-icon" />
            <div class="encyclopedias-content-alias-title-text">
              项目别名
            </div>
          </div>
          <div
            v-if="detailsData.alias.length"
            class="encyclopedias-content-alias-content"
          >
            {{ detailsData.alias }}
          </div>
          <div
            v-if="detailsData.effects.length"
            class="encyclopedias-content-effect-title"
          >
            <div class="encyclopedias-content-effect-title-icon" />
            <div class="encyclopedias-content-effect-title-text">
              功效
            </div>
          </div>
          <div
            v-if="detailsData.effects.length"
            class="encyclopedias-content-effect-content"
          >
            <div
              v-for="item in detailsData.effects"
              :key="item.class_id"
            >
              <div class="project-Effect-item">
                {{ item.class_name }}
              </div>
            </div>
          </div>
          <div
            v-if="detailsData.crowd"
            class="encyclopedias-content-apply-title"
          >
            <div class="encyclopedias-content-apply-title-icon" />
            <div class="encyclopedias-content-apply-title-text">
              适用人群
            </div>
          </div>
          <div
            v-if="detailsData.crowd"
            class="encyclopedias-content-apply-content"
          >
            {{ detailsData.crowd }}
          </div>
          <div
            v-if="detailsData.max_price !=0.00"
            class="encyclopedias-content-price-title"
          >
            <div class="encyclopedias-content-price-title-icon" />
            <div class="encyclopedias-content-price-title-text">
              参考价格
            </div>
          </div>
          <div
            v-if="detailsData.max_price !=0.00"
            class="encyclopedias-content-price-content"
          >
            约{{ million(detailsData.min_price) }}-{{ million(detailsData.max_price) }}元/次
          </div>
          <div
            v-if="detailsData.show_images"
            class="encyclopedias-content-result-title"
          >
            <div class="encyclopedias-content-result-title-icon" />
            <div class="encyclopedias-content-result-title-text">
              效果展示
            </div>
          </div>
          <div
            v-if="detailsData.show_images"
            class="encyclopedias-content-result-conter"
          >
            <div class="swiper-wrap">
              <div v-swiper:mySwiper="swiperTwo">
                <div class="swiper-wrapper">
                  <div
                    v-for="item in detailsData.show_images"
                    :key="item.banner_id"
                    class="swiper-slide"
                  >
                    <div
                      class="banner"
                      :style="{background:'url('+item+') center center no-repeat',backgroundSize:'100% 100%'}"
                    />
                  </div>
                </div>
                <div class="swiper-pagination swiper-pagination-bullets" />
              </div>
            </div>
          </div>
          <div
            v-if="detailsData.crowd||detailsData.limit_crowd||detailsData.merit||detailsData.defect"
            class="encyclopedias-content-archives-details"
          >
            <div class="encyclopedias-content-archives-title">
              <div class="encyclopedias-content-archives-title-icon" />
              <div class="encyclopedias-content-archives-title-text">
                项目档案
              </div>
            </div>
            <div
              v-if="detailsData.crowd"
              class="project-archives-apply-title"
            >
              适合人群
            </div>
            <ul
              v-if="detailsData.crowd"
              class="project-archives-apply-content"
            >
              <li
                v-for="(item,ind) in apply"
                :key="ind"
              >
                {{ item }}
              </li>
            </ul>
            <div
              v-if="detailsData.limit_crowd"
              class="project-archives-apply-title"
            >
              禁忌人群
            </div>
            <ul
              v-if="detailsData.limit_crowd"
              class="project-archives-apply-content"
            >
              <li
                v-for="(item,ind) in taboo"
                :key="ind"
              >
                {{ item }}
              </li>
            </ul>
            <div
              v-if="detailsData.merit"
              class="project-archives-apply-title"
            >
              优点
            </div>
            <ul
              v-if="detailsData.merit"
              class="project-archives-apply-content"
            >
              <li
                v-for="(item,ind) in merit"
                :key="ind"
              >
                {{ item }}
              </li>
            </ul>
            <div
              v-if="detailsData.defect"
              class="project-archives-apply-title"
            >
              缺点
            </div>
            <ul
              v-if="detailsData.defect"
              class="project-archives-apply-content"
            >
              <li
                v-for="(item,ind) in defect"
                :key="ind"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="encyclopedias-content-treatment-title">
            <div class="encyclopedias-content-treatment-title-icon" />
            <div class="encyclopedias-content-treatment-title-text">
              治疗档案
            </div>
          </div>
          <div
            v-if="operation.length"
            class="encyclopedias-content-treatment"
          >
            <div
              v-for="(item,index) in operation"
              :key="item.name"
              :class="[(index+1)%2 ===0?'encyclopedias-content-treatment-class1':'encyclopedias-content-treatment-class2']"
            >
              <div class="encyclopedias-content-treatment-item-left">
                {{ item.name }}
              </div>
              <div class="encyclopedias-content-treatment-item-right">
                {{ item.value||"无" }}
              </div>
            </div>
          </div>
        </div>
        <div
          v-else-if="active===1"
          class="encyclopedias-content-nurse"
        >
          <div class="encyclopedias-content-nurse-title">
            术后护理
          </div>
          <div class="encyclopedias-content-nurse-content-item-wrap">
            <div
              v-if="detailsData.surgery_after.length"
              class="encyclopedias-content-treatment"
            >
              <div
                v-for="(item) in detailsData.surgery_after"
                :key="item.name"
                class="encyclopedias-content-treatment-item"
              >
                <div class="encyclopedias-content-treatment-item-one">
                  <div class="encyclopedias-content-treatment-item-one-left">
                    {{ item.start_day }}-{{ item.end_day }}天
                  </div>
                  <div class="encyclopedias-content-treatment-item-one-right">
                    {{ item.stage }}
                  </div>
                </div>
                <div class="encyclopedias-content-treatment-item-two">
                  <div class="encyclopedias-content-treatment-item-two-left">
                    恢复提示
                  </div>
                  <div class="encyclopedias-content-treatment-item-two-right">
                    {{ item.recover_tips }}
                  </div>
                </div>
                <div class="encyclopedias-content-treatment-item-three">
                  <div class="encyclopedias-content-treatment-item-three-left">
                    护理方法
                  </div>
                  <div class="encyclopedias-content-treatment-item-three-right">
                    {{ item.nurse }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-else
          class="encyclopedias-content-relevant"
        >
          <div class="encyclopedias-content-relevant-title">
            {{ tabs }}
          </div>
          <div class="encyclopedias-content-relevant-content">
            <div
              v-for="item in relevantData"
              :key="item.wiki_id"
              class="encyclopedias-content-relevant-content-item"
            >
              <div v-if="detailsData.need===&quot;medicinal&quot;">
                <Drugs :drugs-data="item" />
              </div>
              <div v-else-if="detailsData.need===&quot;instrument&quot;">
                <Instrument :instrument-data="item" />
              </div>
              <div v-else-if="detailsData.need===&quot;material&quot;">
                <Material :material-data="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDetails, getMedicinal, getMaterial, getInstrument } from '@/api/encyclopediasDetails'
import Drugs from '@/components/drugs'
import Instrument from '@/components/instrument'
import Material from '@/components/material'
import { isBrowser } from '@/utils/util'
export default {
  components: {
    Drugs,
    Instrument,
    Material
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [detailsData] = await Promise.all([
      getDetails(params.details).then(res => {
        return res.data
      })
    ])
    return {
      detailsData
    }
  },
  data() {
    return {
      swiperTwo: {
        loop: true,
        centeredSlides: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          // 轮播图滚动
          // slideChange(i) {
          //   console.log(i)
          // }
        }
      },
      active: 0,
      apply: [],
      taboo: [],
      merit: [],
      defect: [],
      operation: [],
      relevantData: [],
      tabs: ''
    }
  },
  computed: {

  },
  created() {
    if (isBrowser()) {
      this.apply = this.datafilter(this.detailsData.crowd)
      this.taboo = this.datafilter(this.detailsData.limit_crowd)
      this.merit = this.datafilter(this.detailsData.merit)
      this.defect = this.datafilter(this.detailsData.defect)
    }
    if (this.active === 0) {
      if (this.detailsData.operation_file) {
        this.operation = JSON.parse(this.detailsData.operation_file)
      }
    }

    this.Distinguishing()
  },
  mounted() {

  },
  methods: {
    datafilter(str) {
      // console.log(str)
      if (str == null) {
        return
      }
      return str.split('\n')
    },
    million(value) { // 过万处理
      let num
      if (value > 9999) { // 大于9999显示x.xx万
        num = (Math.floor(value / 1000) / 10) + '万'
      } else if (value < 9999 && value > -9999) {
        num = value
      } else if (value < -9999) { // 小于-9999显示-x.xx万
        num = -(Math.floor(Math.abs(value) / 1000) / 10) + '万'
      }
      return num
    },
    Distinguishing() {
      switch (this.detailsData.need) {
        case 'medicinal':
          this.tabs = '相关药品'
          getMedicinal(this.$route.params.details).then(res => {
            this.relevantData = res.data
          })
          break
        case 'instrument':
          this.tabs = '相关器材'
          getInstrument(this.$route.params.details).then(res => {
            this.relevantData = res.data
          })
          break
        case 'material':
          this.tabs = '相关材料'
          getMaterial(this.$route.params.details).then(res => {
            this.relevantData = res.data
          })
          break
      }
    }
  },
  head() {
    // console.log(this.detailsData, 12)
    const effects = []
    this.detailsData.effects.forEach(item => {
      effects.push(item.class_name)
    })
    const describe = this.detailsData.describe.slice(0, 80)
    return {
      title: `${this.detailsData.wiki_name}整形百科【功效|价格|护理|副作用|效果图】_容猫医美`,
      meta: [
        { hid: 'description',
          name: 'description',
          content: `${describe}`
        }, {
          name: 'keywords', content: `${this.detailsData.wiki_name},功效，价格，护理，效果图，副作用`
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: `https://m.rongcat.com/wiki/${this.$route.params.details}`
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.encyclopedias {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  .encyclopedias-wrap {
    width: 1190px;
    margin: 0 auto;
    padding-bottom: 20px;
    overflow: hidden;
  }
}
.encyclopedias-content-title {
  width: 840px;
  height: 46px;
  display: flex;
  align-items: center;
  margin-top: 9px;
}
.encyclopedias-content-title-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-left: 30px;
}
.encyclopedias-content-title-text:hover {
  cursor: pointer;
}
.encyclopedias-content-title-detils-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(80, 76, 255, 1);
  line-height: 20px;
}
.encyclopedias-content-title-icon {
  width: 4px;
  height: 8px;
  background: url("~assets/img/right-icon.png") center center no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
  margin-right: 10px;
}
.encyclopedias-content {
  width: 1190px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding-top: 1px;
  .encyclopedias-content-introduce {
    width: 100%;
    .encyclopedias-content-introduce-name {
      margin-left: 30px;
      margin-top: 22px;
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 25px;
    }
    .encyclopedias-content-introduce-text {
      margin-left: 30px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 21px;
      margin-top: 20px;
    }
  }
  .encyclopedias-content-tab {
    width: 100%;
    height: 58px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-top: 24px;
    display: flex;
    align-items: center;
    > div {
      width: 139px;
      height: 58px;
      text-align: center;
      line-height: 58px;
      white-space: nowrap;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    > div:hover {
      cursor: pointer;
    }
    .active {
      border-top: 2px solid #504cff;
      border-bottom: 2px solid #504cff;
      color: #504cff;
    }
  }
  .encyclopedias-content-archives {
    margin-top: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    padding-right: 30px;
    .encyclopedias-content-characteristic-title {
      display: flex;
      align-items: center;
      .encyclopedias-content-characteristic-title-icon {
        width: 2px;
        height: 12px;
        background: rgba(41, 186, 181, 1)
          linear-gradient(
            140deg,
            rgba(244, 105, 253, 1) 0%,
            rgba(80, 76, 255, 1) 100%
          );
        border-radius: 2px;
      }
      .encyclopedias-content-characteristic-title-text {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
    }
    .encyclopedias-content-characteristic-content {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 21px;
    }
    .encyclopedias-content-alias-title {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .encyclopedias-content-alias-title-icon {
        width: 2px;
        height: 12px;
        background: rgba(41, 186, 181, 1)
          linear-gradient(
            140deg,
            rgba(244, 105, 253, 1) 0%,
            rgba(80, 76, 255, 1) 100%
          );
        border-radius: 2px;
      }
      .encyclopedias-content-alias-title-text {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
    }
    .encyclopedias-content-alias-content {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 21px;
    }
    .encyclopedias-content-effect-title {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .encyclopedias-content-effect-title-icon {
        width: 2px;
        height: 12px;
        background: rgba(41, 186, 181, 1)
          linear-gradient(
            140deg,
            rgba(244, 105, 253, 1) 0%,
            rgba(80, 76, 255, 1) 100%
          );
        border-radius: 2px;
      }
      .encyclopedias-content-effect-title-text {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
    }
    .encyclopedias-content-effect-content {
      display: flex;
      flex-wrap: wrap;
      .project-Effect-item {
        padding: 3px 25px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(119, 119, 119, 1);
        background: rgba(245, 245, 255, 1);
        border-radius: 4px;
        margin-right: 5px;
        margin-top: 10px;
      }
    }
    .encyclopedias-content-apply-title {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .encyclopedias-content-apply-title-icon {
        width: 2px;
        height: 12px;
        background: rgba(41, 186, 181, 1)
          linear-gradient(
            140deg,
            rgba(244, 105, 253, 1) 0%,
            rgba(80, 76, 255, 1) 100%
          );
        border-radius: 2px;
      }
      .encyclopedias-content-apply-title-text {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
    }
    .encyclopedias-content-apply-content {
      width: 836px;
      margin-top: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 21px;
    }
    .encyclopedias-content-price-title {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .encyclopedias-content-price-title-icon {
        width: 2px;
        height: 12px;
        background: rgba(41, 186, 181, 1)
          linear-gradient(
            140deg,
            rgba(244, 105, 253, 1) 0%,
            rgba(80, 76, 255, 1) 100%
          );
        border-radius: 2px;
      }
      .encyclopedias-content-price-title-text {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
    }
    .encyclopedias-content-price-content {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-top: 10px;
    }
    .encyclopedias-content-result-title {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .encyclopedias-content-result-title-icon {
        width: 2px;
        height: 12px;
        background: rgba(41, 186, 181, 1)
          linear-gradient(
            140deg,
            rgba(244, 105, 253, 1) 0%,
            rgba(80, 76, 255, 1) 100%
          );
        border-radius: 2px;
      }
      .encyclopedias-content-result-title-text {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
    }
    .encyclopedias-content-result-conter {
      .swiper-wrapper {
        border-radius: 12px;
      }
      .swiper-wrap {
        width: 550px;
        background: rgba(246, 246, 246, 1);
        border-radius: 12px;
        margin-top: 10px;
        .banner {
          width: 550px;
          height: 302px;
          border-radius: 12px;
        }
      }
    }
    .encyclopedias-content-archives-details {
      .encyclopedias-content-archives-title {
        display: flex;
        align-items: center;
        margin-top: 30px;
        .encyclopedias-content-archives-title-icon {
          width: 2px;
          height: 12px;
          background: rgba(41, 186, 181, 1)
            linear-gradient(
              140deg,
              rgba(244, 105, 253, 1) 0%,
              rgba(80, 76, 255, 1) 100%
            );
          border-radius: 2px;
        }
        .encyclopedias-content-archives-title-text {
          margin-left: 5px;
          font-size: 16px;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
          line-height: 22px;
        }
      }
    }
    .project-archives-apply-title {
      font-size: 13px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-top: 17px;
    }
    .project-archives-apply-content {
      margin-top: 4px;
      > li {
        list-style-type: disc;
        font-size: 13px;
        font-weight: 400;
        color: rgba(119, 119, 119, 1);
        margin-left: 14px;
      }
    }
    .encyclopedias-content-treatment-title {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .encyclopedias-content-treatment-title-icon {
        width: 2px;
        height: 12px;
        background: rgba(41, 186, 181, 1)
          linear-gradient(
            140deg,
            rgba(244, 105, 253, 1) 0%,
            rgba(80, 76, 255, 1) 100%
          );
        border-radius: 2px;
      }
      .encyclopedias-content-treatment-title-text {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
    }
    .encyclopedias-content-treatment {
      background: rgba(246, 246, 246, 1);
      border-radius: 12px;
      padding-bottom: 10px;
      margin-top: 10px;
      .encyclopedias-content-treatment-class1 {
        height: 42px;
        background: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin: 0 10px;
      }
      .encyclopedias-content-treatment-class2 {
        height: 42px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin: 0 10px;
      }
      .encyclopedias-content-treatment-item-left {
        font-size: 13px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      .encyclopedias-content-treatment-item-right {
        margin-left: 62px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(119, 119, 119, 1);
      }
    }
  }
  .encyclopedias-content-nurse {
    width: 100%;
    background: #fff;
    padding: 30px;
    .encyclopedias-content-nurse-title {
      width: 104px;
      height: 38px;
      background: rgba(246, 246, 246, 1);
      border-radius: 19px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      color: rgba(51, 51, 51, 1);
      line-height: 38px;
    }
  }
  .encyclopedias-content-nurse-content-item-wrap {
    margin-top: 20px;
    .encyclopedias-content-treatment-item {
      width: 100%;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
      margin-bottom: 30px;
      .encyclopedias-content-treatment-item-one {
        width: 1110px;
        min-height: 42px;
        height: 50px;
        display: flex;
        align-items: center;
        margin: 0 auto;
      }
      .encyclopedias-content-treatment-item-two {
        width: 1110px;
        min-height: 42px;
        background: rgba(255, 255, 255, 1);
        margin: 0 auto;
        display: flex;
        align-items: center;
      }
      .encyclopedias-content-treatment-item-three {
        width: 1110px;
        min-height: 42px;
        display: flex;
        align-items: center;
        margin: 0 auto;
      }
      .encyclopedias-content-treatment-item-one-left {
        width: 83px;
        height: 18px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 12px;
      }
      .encyclopedias-content-treatment-item-one-right {
        width: 900px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(119, 119, 119, 1);
        margin-left: 90px;
      }
      .encyclopedias-content-treatment-item-two-left {
        width: 83px;
        height: 18px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 12px;
      }
      .encyclopedias-content-treatment-item-two-right {
        width: 900px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(119, 119, 119, 1);
        margin-left: 90px;
        padding: 5px 0;
      }
      .encyclopedias-content-treatment-item-three-left {
        width: 83px;
        height: 18px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 12px;
      }
      .encyclopedias-content-treatment-item-three-right {
        width: 900px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(119, 119, 119, 1);
        margin-left: 90px;
        padding: 5px 0;
      }
    }
  }
  .encyclopedias-content-relevant {
    width: 100%;
    padding-bottom: 20px;
    .encyclopedias-content-relevant-title {
      margin-left: 30px;
      margin-top: 30px;
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
    .encyclopedias-content-relevant-content {
      display: flex;
      flex-wrap: wrap;
    }
    .encyclopedias-content-relevant-content-item {
      margin-left: 30px;
      margin-top: 40px;
    }
  }
}
</style>
